<template>
	<div class="home_div">
		<div id="container"></div>
	</div>
</template>
<script>
	import AMapLoader from '@amap/amap-jsapi-loader';
	import {
		getter
	} from '@/api/index.js'
	import {
		forEach
	} from 'core-js/library/es7/array';
	window._AMapSecurityConfig = {
		// 设置安全密钥
		securityJsCode: '1e01c031a05df36b11159c3bf0923546',
	}
	export default {
		name: "Mapview",
		data() {
			return {
				//map:null,
				tip: [],
				index: 1
			}
		},
		created() {
			this.getDate()
		},
		mounted() {
			this.initAMap();
		},
		methods: {
			getDate() {
				this.$api.getter()
					.then(response => {
						this.tip = response
					})
			},
			initAMap() {

				AMapLoader.load({
					key: '90fd9f2f640845a9e4807e1d6dfaf013', //设置您的key
					version: "2.0",
					plugins: ['AMap.ToolBar', 'AMap.Driving'],
					AMapUI: {
						version: "1.1",
						plugins: [],

					},
					Loca: {
						version: "2.0"
					},
				}).then((AMap) => {
					this.map = new AMap.Map("container", { //设置地图容器id
						viewMode: "3D", //是否为3D地图模式
						zoom: 15, //初始化地图级别
						center: [113.51299368367913, 22.28335787192102], //初始化地图中心点位置
					});
					var markers = new Array();
					let arr = this.tip
					var line = []

					// 循环所有的标记点
					for (var i = 0; i < arr.length; i++) {
						line[i] = [arr[i].longitude, arr[i].latitude]
						var marker = new AMap.Marker({
							position: line[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
						 // icon: new AMap.Icon({
							//         size: new AMap.Size(25,25),
							//         image: 'https://www.emojikeyboard.cn/dji/flag.webp',
							//         imageSize: new AMap.Size(25, 25) 
							//     }),//设置了没改变
							content: `
						    <div style="color: #fff; display: flex;justify-content: center;font-size:25px;align-items: center;width: 50px;height:50px;background:url(https://www.emojikeyboard.cn/dji/flag.webp);background-size:100%">${this.index++}</div>`,
							lable: this.index,
							offset: new AMap.Pixel(-13, -30)
						});
						// 将创建的点标记添加到已有的地图实例：
						marker.setMap(this.map);
					}
					var polyline = new AMap.Polyline({
						path: line,
						isOutline: true,
						outlineColor: '#ffeeff',
						borderWeight: 3,
						strokeColor: "#3366FF",
						strokeOpacity: 1,
						strokeWeight: 6,
						// 折线样式还支持 'dashed'
						strokeStyle: "solid",
						// strokeStyle是dashed时有效
						strokeDasharray: [10, 5],
						lineJoin: 'round',
						lineCap: 'round',
						zIndex: 50,
					})
					this.map.add([polyline]);
					this.map.setFitView();
				}).catch(e => {
					console.log(e);
				})

			},
		}


	}
</script>
<style scoped>
	.home_div {
		padding: 0px;
		margin: 0px;
		width: 100%;
		height: 100%;
		position: relative;
	}

	#container {
		padding: 0px;
		margin: 0px;
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.map_title {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 50px;
		background-color: rgba(27, 25, 27, 0.884);

	}
</style>
